<template>
  <div class="cart">
    <Header title="购物车" :edit="true" />
    <CartDetail v-if="isShow" :changeShow="changeShow"/>
    <Empty v-else/>
    <Footer />
  </div>
</template>

<script>
import Footer from '../../components/AppFooter.vue';
import Empty from '../../components/Empty.vue';
import Header from '../../components/AppHeader.vue';
import CartDetail from './components/CartDetail.vue';
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';

export default {
  components: {
    Footer,
    Empty,
    Header,
    CartDetail
  },  
  setup() {
    const isShow = ref(true);
    const store = useStore();
    const init = () => {
      if(store.state.cartList.length === 0){
        isShow.value = false;
      }
    };

    const changeShow=() => {
      isShow.value = false;
    };

    onMounted(() => {
      init();
    });

    return {
      isShow,
      store,
      changeShow
    }
  }
} 
</script>

<style lang="less" scoped>
.cart {
  display: flex;
  flex-direction: column;
  height: 100%;
  .content{
    flex: 1;
    overflow-y: auto;
  }
}
</style>